﻿@model smp.ButterflyCakes.Models.FormModels.Order.ContactInformationModel
<div class="container">
    <form class="form-actions" action="#">
    <label class="control-label" data-provide="typeahead" for="contactSearchBox">
        Search Existing Contact</label>
    <div class="controls">
        <input id="contactSearchBox" type="text" />
    </div>
    </form>
    <div class="container-fluid">
        @if (ViewBag.Error != null)
        {
            <span class="alert-error">@ViewBag.Error</span>
        }
        @Html.ValidationSummary(true)
    </div>
    <form class="form-horizontal" id="editform" url="/order/savecontactinformation" action="#">
    @Html.HiddenFor(x => x.ComponentId)
    @Html.HiddenFor(x => x.OrderId)
    <input id="ContactId" type="hidden" value="" name="ContactId" />
    <div class="control-group">
        <label class="control-label" for="Titles">
            Title</label>
        <div class="controls">
            @MvcHtmlString.Create(Model.TitleSelect.AddClass("input-medium").Html)
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="FirstName">
            First Name</label>
        <div class="controls">
            <input class="input-medium" type="text" id="FirstName" name="FirstName" placeholder="Enter a first name" value="@Model.FirstName"/>
            @Html.ValidationMessageFor(x => x.FirstName)
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="LastName">
            Last Name</label>
        <div class="controls">
            <input class="input-medium" type="text" id="LastName" name="LastName" placeholder="Enter a last name" value="@Model.LastName"/>
            @Html.ValidationMessageFor(x => x.LastName)
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="Email">
            Email</label>
        <div class="controls">
            <input class="input-large" type="text" id="Email" name="Email" placeholder="Enter a email" value="@Model.Email"/>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="Facebook">
            Facebook</label>
        <div class="controls">
            <input class="input-large" type="text" id="Facebook" name="Facebook" placeholder="Enter a facebook account name" value="@Model.Facebook"/>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="PhoneNumber">
            Phone number</label>
        <div class="controls">
            <input class="input-medium" type="text" id="PhoneNumber" name="PhoneNumber" placeholder="Enter a phone number" value="@Model.PhoneNumber"/>
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
            <a id="editAddress" href="#" class="btn btn-info" style="color: white">Edit Address</a>
        </div>
    </div>
    <div id="addressSection" class="hide">
        <div class="control-group">
            <label class="control-label" for="PostCode">
                Postcode</label>
            <div class="controls">
                <input class="input-medium" type="text" id="PostCode" name="PostCode" placeholder="Enter a postcode" value="@Model.PostCode"/>
                <button id="postcodeSearch" class="btn" type="button">
                    Search</button>
                <img id="postCodeSpinner" class="hide" src="@Url.Content("~/Content/images/ajax-loader.gif")" alt="Loading..."/>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="HouseNameNumber">
                House Name Number</label>
            <div class="controls">
                <input class="input-small" style="" type="text" id="HouseNameNumber" name="HouseNameNumber" placeholder="Enter a house name or number" value="@Model.HouseNameNumber"/>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="Street">
                Street</label>
            <div class="controls">
                <input class="input-xlarge" type="text" id="Street" name="Street" placeholder="Enter a street" value="@Model.Street"/>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="Town">
                Town</label>
            <div class="controls">
                <input class="input-xlarge" type="text" id="Town" name="Town" placeholder="Enter a town" value="@Model.Town"/>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="County">
                County</label>
            <div class="controls">
                <input class="input-xlarge" type="text" id="County" name="County" placeholder="Enter a county" value="@Model.County"/>
            </div>
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
        </div>
    </div>
    </form>
    <div class="form-actions">
        <button id="save" type="submit" class="btn btn-success">
            Next
        </button>
        <button id="cancel" type="submit" class="btn btn-danger hide">
            Cancel
        </button>
    </div>
</div>
<br />
<a href="http://www.tabcat.co.uk">Postcode search powered by tabcat - free postcode
    address lookup</a>
<script type="text/javascript">

    $(document).ready(function () {

        $('#editAddress').click(function () {
            $('#editAddress').slideUp(250);
            $('#addressSection').slideDown(500);
        });

        $('#postcodeSearch').click(function (e) {
            e.preventDefault();
            $('#postCodeSpinner').fadeIn(100);
            $.ajax({
                url: 'http://www.tabcat.co.uk/postcode_lookup_json_v2.php',
                dataType: 'jsonp',
                data: 'postcode=' + $("#PostCode").val() + '&number=',
                jsonp: 'jsonp_callback',
                success: function (data) {
                    if (data.length == 0)
                        return;
                    $('#Street').val(data[0].address);
                    $('#Town').val(data[0].town);
                    $('#County').val(data[0].county);
                }
            });
            $('#postCodeSpinner').fadeOut(100);
        });

        AjaxTypeAhead($('#contactSearchBox'), "/order/searchcontacts/", function (selectedId) {
            $.ajax({
                url: "/order/getcontact/" + selectedId,
                dataType: "json",
                success: function(data) {
                    $('#Title').val(data.Title);
                    $('#FirstName').val(data.FirstName);
                    $('#LastName').val(data.LastName);
                    $('#Email').val(data.Email);
                    $('#Facebook').val(data.Facebook);
                    $('#PhoneNumber').val(data.PhoneNumber);
                    $('#PostCode').val(data.PostCode);
                    $('#HouseNameNumber').val(data.HouseNameNumber);
                    $('#Street').val(data.Street);
                    $('#Town').val(data.Town);
                    $('#County').val(data.County);
                    $('#ContactId').val(data.Id);
                    $('#contactSearchBox').val(data.SearchName);
                }
            });
        });
    });
</script>
